<template>
    <div id="notice-detail">
        <div class="button-bar">
            <el-button size="mini" @click="onBack" icon="el-icon-back" >返回</el-button>
            <el-button type="primary" size="mini" @click="onEdit" icon="el-icon-edit" v-show="noticeDetail.status!=='1'" v-buttonPms="['noticeManage','edit']">编辑</el-button>
        </div>
        <div class="content">
            <h1 class="title">基本信息</h1>
            <section class="section basedata">
                <div class="fields">标题：{{noticeDetail.title}}</div>
                <div class="fields">发布人：{{noticeDetail.publishUser}}</div>
                <div class="fields">状态：{{noticeDetail.statusName}}</div>
                <div class="fields">创建时间：{{noticeDetail.createDate}}</div>
                <div class="fields">发布时间：{{noticeDetail.createDate}}</div>
            </section>
            
            <h1 class="title">正文</h1>
            <section class="section artical" v-html="noticeDetail.content"></section>
            <div class="button-bar2" v-if="true">
                <el-button  type="primary"  @click="publish" v-show="noticeDetail.status!=='1'">同意发布</el-button>
            </div>
            <!-- <h1 class="title">审批流程</h1>
            <section class="section">
                    2019.04.23  xxx
                    2019.04.24  yyy
            </section> -->

        </div>
    </div>
</template>
<script>
export default {
    props:{
        initData:{
            type:Object,
            default:{},
            require:false,
        }
    },
    data(){
        return{
            id:'',
            noticeDetail:{}
        }
    },
    watch:{
        initData(newVal){
            this.id=newVal.data
            this.getDetail()
            this.setHasRead()
        },
        
    },
    methods:{
        getDetail(){
            var submitData={
                id:this.id
            }
            
            this.$http.noticeDetail(submitData)
            .then((res)=>{
                var data=res.data.data
                if(!data){
                    this.$message.error("数据异常!")
                    return
                }
                var newData=this.transData(data)
                this.noticeDetail=data
            }).catch((err)=>{
                
                if(err.data && err.data.message){
                    
                }else{
                    window.message.close()
                    window.message= this.$message({
                        type:'error',
                        message:'程序出错,查询失败!',
                        showClose:true,
                    })
                }
                throw(err)
            })
        },

        onBack(){
            var initData={...this.initData}
            initData.optType='list'
            initData.data=''
            this.$emit('switchTabComponent',initData)
        },

        onEdit(){
            var initData={...this.initData}
            initData.optType='edit'
            initData.data=this.noticeDetail
            initData.from='detail'
            this.$emit('switchTabComponent',initData)
        },

         transData(data){
            for(var key in this.initData.statusList){
                if(this.initData.statusList[key]===data.status){
                    data.statusName=key
                }
            }
            
            return data
        },

        //发布公告
        publish(){
            var submitData={
                id:this.id,
                moduleName:"公告管理",
            }
            this.$http.publishNotice(submitData)
            .then((res)=>{
                var data=res.data
                this.$message.success("发布成功")
                var initData={...this.initData}
                initData.optType='list'
                initData.data=''
                this.$emit('switchTabComponent',initData)
            }).catch((err)=>{
                
                if(err.data && err.data.message){
                    
                }else{
                    window.message.close()
                    window.message= this.$message({
                        type:'error',
                        message:'程序出错,操作失败!',
                        showClose:true,
                    })
                }
                throw(err)
            })

        },

        setHasRead(){
            var submitData={
                ids:this.id
            }
            this.$http.setHasRead(submitData)
            .then((res)=>{  
               
            }).catch((err)=>{
                throw(err)
            })
        }

    },
}
</script>
<style lang="scss" scoped>
#notice-detail{
    height: 100%;
    display: flex;
    flex-direction: column;
}

.button-bar{
    padding: 10px;
}
.button-bar2{
    margin:20px 30px;
    text-align:center;
    .el-button{

    }
}

.content{
    flex: 1;
    margin: 10px;
    //border: 1px solid #4a5b71;
    border-radius: 10px;
    padding: 10px 30px;
    overflow: auto;
    .title{
        font-size: 18px;
        line-height: 2em;
        text-indent: 1.5em;
        border-bottom: 1px solid #4a5b71;
        margin-bottom: 20px;
        color: #d7e5f7;
    }
    .section{
        margin-bottom: 30px;
        padding: 0px 30px;
        color: #d7e5f7;
        
    }
    .basedata{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        .fields{
            flex-basis: 30%;
            margin: 10px;
        }
        .textarea{
            flex-basis: 80%;
        }
    }

     .artical{
         min-height:200px;
        font-size: inherit;
        /deep/ td{
            border:1px solid rgba(255, 254, 254, 0.301);
        }
        /deep/ th{
            border:1px solid rgba(255, 254, 254, 0.301);
        }
    }

}
</style>

